<template>
    <div id="game">
      <div id="dino" :style="dinoStyle"></div>
      <div id="road"></div>
      <div id="clouds"></div>
      <div id="cactus" :style="cactusStyle"></div>
      <div id="score">0</div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue'
  
  export default {
    setup() {
      const dinoStyle = ref({})
      const cactusStyle = ref({})
      const score = ref(0)
  
      onMounted(() => {
        // 初始化游戏逻辑
      })
  
      return {
        dinoStyle,
        cactusStyle,
        score
      }
    }
  }
  </script>
  
  <style>
  /* 游戏样式 */
  #game {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #d0e8f2;
  }
  
  #dino {
    position: absolute;
    bottom: 0;
    left: 50px;
    background-image: url('dino.png');
    width: 44px;
    height: 47px;
  }
  
  #road {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-image: url('road.png');
  }
  
  #clouds {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background-image: url('clouds.png');
  }
  
  #cactus {
    position: absolute;
    bottom: 0;
    left: 1000px;
    background-image: url('cactus.png');
    width: 39px;
    height: 100px;
  }
  </style>